<template>
	<view>
		<!-- 外部车辆登记页面 -->
		<!-- <view class="header-close" :style="'padding-top:' + (statusBarHeight + 13) + 'px;'" @tap="close">关闭</view> -->
		<view class="head-block" v-if="weixin == 2">
			<view class="nav-title" :style="'top:10px'"></view>
			<!-- 返回 -->
			<view class="icon" @tap="goMy" :style="'top:6px'">
				<van-icon name="arrow-left" color="#333" size="45rpx" />
			</view>
		</view>
		<view class="parking_img">
			<image src="../../static/assets/img/car_01.png" style="width: 750rpx;" mode="widthFix"></image>
		</view>
		<view>
			<view class="title-input">
				<view class="title-car">
					<span class="title-number">
						<span class="title-text">请输入查询车牌号</span>
					</span>
				</view>
			</view>
			<view></view>

			<!-- 车牌号码输入框 -->
			<view :data-id="index" v-for="(item, idx) in plateNumbers" :key="item.i">
				<view class="carNumber">
					<!-- 车牌号头两位 -->
					<view class="carNumber-items">
						<!-- 常规 -->
						<view :class="'carNumber-item ' + (plate === idx && plateIndex === 0 ? 'active' : '')"
							:data-idx="idx" :data-index="0" @tap="openKeyboard">
							{{ plateNumbers[idx][0] || '' }}
						</view>
						<view :class="'carNumber-item ' + (plate === idx && plateIndex === 1 ? 'active' : '')"
							:data-idx="idx" :data-index="1" @tap="openKeyboard">
							{{ plateNumbers[idx][1] || '' }}
						</view>
						<view :class="'carNumber-item ' + (plate === idx && plateIndex === 2 ? 'active' : '')"
							:data-idx="idx" :data-index="2" @tap="openKeyboard">
							{{ plateNumbers[idx][2] || '' }}
						</view>
						<view :class="'carNumber-item ' + (plate === idx && plateIndex === 3 ? 'active' : '')"
							:data-idx="idx" :data-index="3" @tap="openKeyboard">
							{{ plateNumbers[idx][3] || '' }}
						</view>
						<view :class="'carNumber-item ' + (plate === idx && plateIndex === 4 ? 'active' : '')"
							:data-idx="idx" :data-index="4" @tap="openKeyboard">
							{{ plateNumbers[idx][4] || '' }}
						</view>
						<view :class="'carNumber-item ' + (plate === idx && plateIndex === 5 ? 'active' : '')"
							:data-idx="idx" :data-index="5" @tap="openKeyboard">
							{{ plateNumbers[idx][5] || '' }}
						</view>
						<view :class="'carNumber-item ' + (plate === idx && plateIndex === 6 ? 'active' : '')"
							:data-idx="idx" :data-index="6" @tap="openKeyboard">
							{{ plateNumbers[idx][6] || '' }}
						</view>
						<!-- 新能源 -->
						<view :class="'carNumber-item ' + (plateNumbers[idx][7] ? '' : 'carNumber-item-newpower')">
							<view v-if="!plateNumbers[idx][7]" :data-idx="idx" :data-index="7" @tap="showPowerBtn">
								<view class="carNumber-newpower-add">+</view>
								<view>新能源</view>
							</view>
							<view v-if="plateNumbers[idx][7]" :data-idx="idx" :data-index="7" @tap="openKeyboard">
								{{ plateNumbers[idx][7] }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 虚拟键盘 -->
			<view class="keyboard" v-if="KeyboardState">
				<view class="keyboardClose">
					<view class="keyboardClose_btn" @tap="closeKeyboard">关闭</view>
				</view>
				<!-- 省份简写键盘 -->
				<view class="keyboard-item" v-if="plateIndex === 0">
					<view class="keyboard-line" v-for="(item, index) in provinces" :key="index">
						<view class="keyboard-btn" :data-val="itemlist" :data-plate="plate" @tap="bindChoose"
							v-for="(itemlist, index1) in item" :key="index1">
							{{ itemlist }}
						</view>
					</view>
					<view class="keyboard-del" @tap="bindDelChoose">
						<van-icon name="cross" style="margin-top: 10rpx" />
						<!-- <text class="font_family icon-shanchu keyboard-del-font"></text> -->
					</view>
				</view>
				<!-- 车牌号码选择键盘 -->
				<view class="keyboard-item iscarnumber" v-else>
					<view class="keyboard-line" v-for="(item, index) in numbers" :key="index">
						<view class="keyboard-btn" :data-val="itemlist" :data-plate="plate" @tap="bindChoose"
							v-for="(itemlist, index1) in item" :key="index1">
							{{ itemlist }}
						</view>
					</view>
					<view class="keyboard-del" @tap="bindDelChoose">
						<van-icon name="cross" />
					</view>
				</view>
			</view>
			<!-- 提交车牌 -->
			<van-button type="info" class="carNumberBtn" @tap.native="submitNumber">查询</van-button>
		</view>
		<view class="mark" v-if="isShow">
			<view class="content">
				<image class="bg_img" src="../../static/assets/img/query_01.png" mode="widthFix"></image>
				<view class="warpper">
					<view class="title">
						查询结果
					</view>
					<view class="phone" @click='payPhone()'>
						<image src="../../static/assets/img/phone_01.png" mode="widthFix"
							style="width: 28rpx;height: 28rpx;"></image>
						<view class="text">
							{{phoneNum || '暂无记录'}}
						</view>
					</view>
					<view class="onsummit"  @click='onsummit()'>
						确定
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import util from './../../utils/util.js';
	import api from './../../utils/api.js';
	const app = getApp();
	export default {
		data() {
			return {
				busiCode: '',
				tradeNoTime: 10,
				tradeNoInterval: '',
				getPhonePar: {},
				phoneNum:'',
				//接口参数
				// 省份简写
				provinces: [
					['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
					['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
					['桂', '琼', '渝', '川', '贵', '云', '藏'],
					['陕', '甘', '青', '宁', '新']
				],

				// 车牌输入
				numbers: [
					['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
					['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
					['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
					['W', 'X', 'Y', 'Z', '港', '澳', '学']
				],

				carnum: [],
				showNewPower: false,
				KeyboardState: false,
				username: '',
				plateNumbers: [
					['', '', '', '', '', '', '', '']
				],
				plate: 0,

				//第几个车牌
				plateIndex: -1,

				weixinCode: '',
				phone: '',
				statusBarHeight: app.globalData.statusBarHeight,
				tradeNo: '',
				isShow:false,
				weixin: uni.getStorageSync('weixin')
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
		
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		// onShareAppMessage: function() {}
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		methods: {
			onsummit(){
				this.isShow = false
			},
			payPhone(e) {
				uni.makePhoneCall({
					phoneNumber: this.phoneNum.toString(), //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);

					}
				})
			},
			goMy(i) {
				uni.navigateBack({
					delta: 1
				});
			},
			// 选中点击设置
			bindChoose(e) {
				var plate = this.plate;
				var index = this.plateIndex;
				var plateNumbers = this.plateNumbers;
				plateNumbers[plate][index] = e.target.dataset.val;
				this.setData({
					plateNumbers
				});

				if (index < 7) {
					index = index + 1;
					this.setData({
						plateIndex: index
					});
				} else {
					this.setData({
						KeyboardState: false,
						plate: 0,
						//第几个车牌
						plateIndex: -1
					});
				}
			},

			bindDelChoose() {
				var plate = this.plate;
				var index = this.plateIndex;

				if (index > 0) {
					index = index - 1;
					this.setData({
						plateIndex: index
					});
				}

				console.log(index);
				var plateNumbers = this.plateNumbers;
				plateNumbers[plate][index] = '';
				this.setData({
					plateNumbers
				});
			},

			showPowerBtn() {
				this.setData({
					showNewPower: true,
					KeyboardState: true
				});
			},

			closeKeyboard() {
				this.setData({
					KeyboardState: false
				});
			},

			openKeyboard(e) {
				this.setData({
					KeyboardState: true,
					plate: e.currentTarget.dataset.idx,
					plateIndex: e.currentTarget.dataset.index
				});
			},

			// 保存  // 提交车牌号码
			submitNumber() {
				const that = this;
				const plateNumberslength = that.plateNumbers.map((e) => e.join(''));

				for (let i = 0; i < plateNumberslength.length; i++) {
					if (plateNumberslength[i].length < 7) {
						uni.showToast({
							title: '请输入完整车牌',
							icon: 'none'
						});
						return;
					}
				}
				that.externalCarCheck();
			},

			/***缓存参数 */
			setStorages(res) {
				uni.setStorage({
					key: 'name',
					data: res.data.busiInfo.name
				}); //姓名

				uni.setStorage({
					key: 'phoneNumber',
					data: res.data.busiInfo.phoneNumber
				}); //手机号

				uni.setStorage({
					key: 'faceImageUrl',
					data: res.data.busiInfo.faceImageUrl
				}); //头像

				uni.setStorage({
					key: 'identityId',
					data: res.data.busiInfo.identityId
				}); //用户id

				uni.setStorage({
					key: 'unionId',
					data: res.data.busiInfo.unionId
				}); //用户id

				if (res.data.busiInfo.plateNos != null && res.data.busiInfo.plateNos.length > 0) {
					uni.setStorage({
						key: 'status',
						data: true
					}); //状态

					uni.setStorage({
						key: 'plateNos',
						data: res.data.busiInfo.plateNos.map((e) => e).toString()
					}); //用户车牌号
				} else {
					uni.setStorage({
						key: 'status',
						data: true
					}); //状态

					uni.setStorage({
						key: 'plateNos',
						data: ''
					}); //用户车牌号
				}
			},

			externalCarCheck() {
				var that = this;
				// console.log(that.getPhonePar);
				that.getPhonePar.plateNo = that.plateNumbers[0].join('');
				// uni.showLoading({
				//     title: '信息提交中...',
				//     mask: true
				// });
				let param = {
					plateNo:that.plateNumbers[0].join(''),
				} 
				util.request(api.getPhoneByPlateNo, param, 'GET')
					.then((res) => {
						console.log(res)
						uni.hideLoading();
						if (res.success) {
							that.setData({
								KeyboardState: false,
								isShow:true,
								phoneNum:res.data
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},

			//左上角关闭
			close() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		}
	};
</script>
<style>
	@import './personlicenses.css';
</style>
